<template>
  <div class="register">
    <Header /> <!-- 引入Header组件 -->
    <div class="container mt-5">
      <h1>注册</h1>
      <form @submit.prevent="handleRegister"> <!-- 表单提交事件处理，防止默认提交行为 -->
        <div class="mb-3">
          <label for="username" class="form-label">用户名</label>
          <input type="text" id="username" v-model="username" class="form-control" required /> <!-- 用户名输入框，双向绑定username -->
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">邮箱</label>
          <input type="email" id="email" v-model="email" class="form-control" required /> <!-- 邮箱输入框，双向绑定email -->
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" id="password" v-model="password" class="form-control" required /> <!-- 密码输入框，双向绑定password -->
        </div>
        <button type="submit" class="btn btn-primary">注册</button> <!-- 提交按钮 -->
      </form>
    </div>
    <Footer /> <!-- 引入Footer组件 -->
  </div>
</template>

<script>
import Header from '@/components/Header.vue'; // 导入Header组件
import Footer from '@/components/Footer.vue'; // 导入Footer组件
import { mapActions } from 'vuex'; // 导入Vuex中的mapActions

export default {
  components: {
    Header, // 注册Header组件
    Footer, // 注册Footer组件
  },
  data() {
    return {
      username: '', // 用户名字段
      email: '', // 邮箱字段
      password: '', // 密码字段
    };
  },
  methods: {
    ...mapActions(['register']), // 映射Vuex的register方法
    async handleRegister() {
      try {
        await this.register({ username: this.username, email: this.email, password: this.password }); // 调用register方法注册用户
        alert('注册成功'); // 注册成功提示
        this.$router.push('/'); // 注册成功后跳转到主页
      } catch (error) {
        alert(error.message); // 注册失败时显示错误信息
      }
    },
  },
};
</script>

<style scoped>
.register {
  text-align: center; /* 设置注册页面的文本居中对齐 */
}

.container {
  max-width: 400px; /* 设置容器的最大宽度 */
  margin: 0 auto; /* 自动水平外边距以居中对齐 */
}
</style>
